/* eslint-disable react/no-unknown-property */
import { ProCard, ProDescriptions, ProList } from "@ant-design/pro-components";
import { Avatar, Calendar, CalendarProps, Image, Carousel, Col, List, Row, Space, Typography, theme, Card } from "antd";
import React, { useEffect, useRef, useState } from "react";
import AppBg from "@/assets/app_bg.svg";
import InfoBg from "@/assets/app_banner_1.png";
import whiteBg from "@/assets/white.svg";
import partlyCloudy from "@/assets/partly_cloudy.svg";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
import styles from "./style/index.module.less";
import WelcomeUser from "./components/WelcomeUser";
import ProCardExtra from "./components/ProCardExtra";
import CardBg from "@/assets/card_bg.svg";
import ProCardTitle from "./components/ProCardTitle";
import UserInfoCardHeader from "./components/UserInfoCardHeader";
import IconFont from "@/components/IconFont";
import { getWeather } from "@/services/api/module/basis/weather";
import YintianBg from "@/assets/weather_yintian.svg";
import RainAnimation from "./components/RainAnimation";
import CloundPath from "@/assets/cloud.png";
import Cardbga from "@/assets/Card.png";
import ScrollBar from "@/components/ScrollBar";
import CustomBlockquote from "@/components/Blockquote";
import banner1 from "@/assets/banner/1.svg";
import banner2 from "@/assets/banner/4feccf92-e379-4feb-8bab-fff32377876b.png";
import infoCard from "@/assets/bg-header-CvyqjA5I.png";
import Map from "./components/Map";
import appPath from "@/assets/bg-app-D4spznhE.png";
import appBgPath from "@/assets/white@1x.png";
const InfoCenter: React.FC = () => {
	const appList = [
		{ title: "系统设置", description: "系统基础配置，配置企业基本相关信息", icon: "icon-huiyuanshuju" },
		{ title: "推送中心", description: "配置推送信息，推送到各", icon: "icon-huiyuanshuju" },
		{ title: "租户管理", description: "配置推送信息，推送到各", icon: "icon-puweizu" },
		{ title: "文档库", description: "配置推送信息，推送到各", icon: "icon-wenjianjia" },
		{ title: "开放接口", description: "配置推送信息，推送到各", icon: "icon-tibaobiaodan" },
		{ title: "审批中心", description: "配置推送信息，推送到各", icon: "icon-hangweifenxi" }
	];
	const [lat, setLat] = useState(120.19382669582967);
	const [lng, setLng] = useState(30.258134);
	const [tab, setTab] = useState("login");
	useEffect(() => {
		// // 检查浏览器是否支持Geolocation API
		if (navigator.geolocation) {
			// 获取用户的地理位置信息
			navigator.geolocation.getCurrentPosition(
				function (position) {
					// 获取经纬度
					setLat(position.coords.latitude);
					setLng(position.coords.longitude);
					getWeather();
				},
				function (error) {
					console.error("获取位置信息时出错：", error);
				}
			);
		} else {
			console.error("您的浏览器不支持Geolocation API。");
		}
	}, []);
	const weatherCardRef = useRef(null);
	return (
		<>
			<Row>
				<Col xs={24} md={24} xl={17} lg={17}>
					<ProCard ghost gutter={[16, 16]} wrap>
						<ProCard
							colSpan={24}
							bodyStyle={{
								background: `url('http://hov-boot.oss-cn-fuzhou.aliyuncs.com/2024/05/04/08e04ac9e7d84cc69c2dae6fd01ea376.svg') no-repeat`,
								backgroundPosition: "center",
								borderRadius: "6px",
								backgroundSize: "170%"
							}}
						>
							<Space align="center">
								<Typography.Title style={{ marginBottom: "0px", color: "white" }} level={4}>
									Hi，Herther
								</Typography.Title>
								<Typography style={{ marginTop: 6, color: "white" }}>下午好，今天是你加入的第 100 天～ </Typography>
							</Space>
						</ProCard>
						<ProCard colSpan={24} title={<ProCardTitle title={"设备分布"} />}>
							<Map lng={lng} lat={lat} />
						</ProCard>
						<ProCard
							colSpan={24}
							bodyStyle={{
								minHeight: 320
							}}
							extra={<ProCardExtra />}
							title={<ProCardTitle title={"快捷方式"} />}
						>
							<Row wrap gutter={[10, 10]}>
								{appList.map((item, index) => {
									return (
										<Col key={index} xs={12} sm={12} md={12} lg={6} xl={6}>
											<Card
												hoverable
												// bordered
												styles={{
													body: {
														padding: "10px",
														borderRadius: "6px",
														background: `url(${appPath}) no-repeat`,
														backgroundSize: "cover"

														// background: `url(${appPath}) no-repeat`
													}
												}}
											>
												<Space>
													<IconFont style={{ fontSize: "35px" }} type={item?.icon} />
													<Space direction="vertical" size={0}>
														<Typography.Title level={5} style={{ marginBottom: "0" }}>
															{item.title}
														</Typography.Title>
													</Space>
												</Space>
											</Card>
										</Col>
									);
								})}
							</Row>
						</ProCard>
					</ProCard>
				</Col>

				<Col xs={24} md={24} xl={7} lg={7}>
					<ProCard ghost gutter={[16, 16]} wrap>
						<ProCard
							ref={weatherCardRef}
							title={<UserInfoCardHeader />}
							extra={
								<div className={styles.right}>
									<div className={styles.date}>
										<Typography.Text className={styles.dateText}>{dayjs().format("MMM D dddd")}</Typography.Text>
									</div>
									<div className={styles.weather}>
										<Typography.Text className={styles.text}>中雨</Typography.Text>
									</div>
								</div>
							}
							colSpan={24}
							bordered={false}
							style={{
								background: `url(${YintianBg}) no-repeat`,
								backgroundPosition: "center",
								borderRadius: "6px",
								backgroundSize: "170%"
								// backgroundSize: "300%"
							}}
							bodyStyle={{
								minHeight: "200px",
								color: "white",
								width: "100%",
								position: "relative"
							}}
						>
							{/* 雨滴动画容器 */}
							<div
								id="rain-animation-container"
								style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", overflow: "hidden" }}
							>
								<RainAnimation />
							</div>
							<div className={styles.weatherSunnyCard}>
								<div className={styles.left}>
									20
									<span className={styles.c}>c</span>
								</div>
								<div>
									<Typography.Text style={{ fontSize: "16px", color: "white" }}>福建省 厦门市集美区杏林村</Typography.Text>
								</div>
							</div>
							<img width={100} src={CloundPath} className={styles.cloud} />
						</ProCard>
					</ProCard>
				</Col>
			</Row>
		</>
	);
};
export default InfoCenter;
